<template>
  <div>
    <div><el-card>
      <div slot="header">
        <!--          面包屑导航-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--        表单-->
      <div>
        <el-form :model="ArticleForm" ref="ArticleFormRef" label-width="100px">
          <el-form-item label="状态: ">
            <el-radio-group v-model="pageQuery.status">
              <el-radio :label="null">全部</el-radio>
              <el-radio :label="0">草稿</el-radio>
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="3">审核失败</el-radio>
              <el-radio :label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道">
            <el-select v-model="pageQuery.channel_id" placeholder="请选择活动区域">
              <el-option label="全部" :value="null"></el-option>
              <el-option :label="channel.name" :value="channel.id" v-for="channel in channels" :key="channel.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              v-model="checkDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectData" :disabled="loading">筛选</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card></div>
    <div><el-card class="article-table">
      <div slot="header" style="font-size: 20px;">
        根据筛选条件共选出{{totalData}}条数据
      </div>
      <div>
        <el-table
          :data="articles"
          v-loading="loading"
          stripe
          style="width: 100%"
          :border="true">
          <el-table-column
            label="封面"
            width="180">
            <template slot-scope="scope">
              <img :src="scope.row.cover.images[0]" alt="" class="pic" v-if="scope.row.cover.images[0]">
              <img src="../../public/none.gif" alt="" class="pic" v-else>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180">
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status===0">草稿</el-tag>
              <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
              <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
              <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
              <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="pubdate"
            label="发布时间">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="deleteArticle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="pageQuery.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageQuery.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalData"
        :disabled="loading">
      </el-pagination>
    </el-card></div>
  </div>
</template>

<script>
import { getArticleDataWay, getArticleChannelsWay, deleteArticleWay } from '../api/article'
export default {
  name: 'Article',
  data () {
    return {
      ArticleForm: {},
      ArticleFormRules: [],
      articles: [],
      pageQuery: {
        page: 1,
        per_page: 10,
        status: null,
        channel_id: null,
        begin_pubdate: null,
        end_pubdate: null
      },
      totalData: 0,
      // 选择分类列表
      channels: [],
      // 开始和结束时间
      checkDate: null,
      // 是否加载
      loading: false
    }
  },
  methods: {
    // 获取列表数据
    getData () {
      this.loading = true
      getArticleDataWay(this.pageQuery).then(res => {
        this.articles = res.data.data.results
        this.totalData = res.data.data.total_count
        this.loading = false
      })
    },

    // 获取分类参数
    getChannel () {
      getArticleChannelsWay().then(res => {
        this.channels = res.data.data.channels
      })
    },

    // 改变当前页码
    handleCurrentChange (page) {
      this.pageQuery.page = page
      this.getData()
    },

    // 改变每页显示条数
    handleSizeChange (size) {
      this.pageQuery.per_page = size
      this.getData()
    },

    // 筛选数据
    selectData () {
      this.pageQuery.page = 1
      this.pageQuery.per_page = 10
      // 设置时间
      if (this.checkDate) {
        this.pageQuery.begin_pubdate = this.checkDate[0]
        this.pageQuery.end_pubdate = this.checkDate[1]
      } else {
        this.pageQuery.begin_pubdate = null
        this.pageQuery.end_pubdate = null
      }
      this.getData()
    },

    // 删除文章
    deleteArticle (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        id = id.toString()
        deleteArticleWay(id).then(res => {
          console.log(res)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },

  created () {
    this.getData()
    this.getChannel()
  }
}
</script>

<style scoped lang="less">
  .article-table {
    margin-top: 20px;
  }
  .el-pagination{
    margin-top: 30px;
  }
  .pic{
    width: 100px;
    background-size: cover;
  }
</style>
